import { onMounted } from 'vue';
import * as echarts from 'echarts';

export default function useEchartDemo() {
  onMounted(() => {
    const chartDom = document.getElementById('drawEchart');
    const myChart = echarts.init(chartDom!);
    let option:any;

    const base = +new Date(2014, 9, 3);
    const oneDay = 24 * 3600 * 1000;
    const date:any[] = [];
    const data:any[] = [Math.random() * 150];
    let now = new Date(base);

    function addData(shift?:boolean) {
      const str:string = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
      date.push(str);
      data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);
      if (shift) {
        date.shift();
        data.shift();
      }
      now = new Date(+new Date(now) + oneDay);
    }
    for (let i = 1; i < 10000; i++) {
      addData();
    }
    // eslint-disable-next-line prefer-const
    option = {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: date,
      },
      yAxis: {
        boundaryGap: [0, '50%'],
        type: 'value',
      },
      series: [
        {
          name: '成交',
          type: 'line',
          smooth: true,
          symbol: 'none',
          stack: 'a',
          areaStyle: {
            normal: {},
          },
          data,
        },
      ],
    };
    setInterval(() => {
      for (let i = 1; i < 5000; i++) {
        addData(true);
      }
      myChart.setOption({
        xAxis: {
          data: date,
        },
        series: [
          {
            name: '成交',
            data,
          },
        ],
      });
    }, 1000);

    myChart.setOption(option);
  });
}
